<template>
<div>
 <div class="sort-header">
            <router-link to="/">
                <span>{{cancel}}</span>
            </router-link>
            <input type="text" class="sort-input" placeholder="iphone14预计发售">
            <a href="javascript:;">
                <img class="sort-search" src="../assets/sort-search.png" alt="">
            </a>
        </div>
    <div class="sort-box">
        <!-- 头部 -->

        <div class="sort-content">
            <!-- 左边的分类 -->
            <div class="sortting">
                <div class="sortting-list">
                    <ul class="sort-ul">
                        <li v-for="sorts in sorts" :key="sorts.id">
                            <a href="javascript:;" style="color:#000;font-size:13px">
                                {{sorts.title}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 右边的具体组件 -->
            <div class="sortmodual">
                <p style="position:relative;left:5px;"><b>{{cursort}}</b></p>
                <sortblock v-for="sortblocks in sortblocks" :key="sortblocks.id" :imgsrc="sortblocks.imgsrc"
                    :name="sortblocks.name" />
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    import uuid from "uuid"
    import sortblock from "./sort/sortblock.vue"
    export default {
        name: "sort",
        components: {
            sortblock
        },
        data() {
            return {
                cancel: "<",
                cursort: "热门分类",
                sorts: [{
                        id: uuid.v4(),
                        title: "热门推荐"
                    },
                    {
                        id: uuid.v4(),
                        title: "手机数码"
                    },
                    {
                        id: uuid.v4(),
                        title: "家用电器"
                    },
                    {
                        id: uuid.v4(),
                        title: "电脑办公"
                    },
                    {
                        id: uuid.v4(),
                        title: "玩具乐器"
                    },
                    {
                        id: uuid.v4(),
                        title: "家具厨卫"
                    },
                    {
                        id: uuid.v4(),
                        title: "内衣配饰"
                    },                  
                    {
                        id: uuid.v4(),
                        title: "男装"
                    },
                    {
                        id: uuid.v4(),
                        title: "男鞋"
                    },
                    {
                        id: uuid.v4(),
                        title: "女装"
                    },
                    {
                        id: uuid.v4(),
                        title: "女鞋"
                    },
                    {
                        id: uuid.v4(),
                        title: "汽车生活"
                    },
                    {
                        id: uuid.v4(),
                        title: "京东超市"
                    },
                    {
                        id: uuid.v4(),
                        title: "母婴"
                    },
                    {
                        id: uuid.v4(),
                        title: "童装"
                    },
                    {
                        id: uuid.v4(),
                        title: "图书音像"
                    },
                    {
                        id: uuid.v4(),
                        title: "户外运动"
                    },
                    {
                        id: uuid.v4(),
                        title: "数码用品"
                    },
                    {
                        id: uuid.v4(),
                        title: "家具装饰"
                    },
                    {
                        id: uuid.v4(),
                        title: "酒水饮品"
                    },
                    {
                        id: uuid.v4(),
                        title: "学习用品"
                    },
                    {
                        id: uuid.v4(),
                        title: "电子零件"
                    }
                ],
                sortblocks: [{
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg",
                        name: "空调"
                    },
                    {
                        imgsrc: "//img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg",
                        name: "冰箱"
                    },
                    {
                        imgsrc: "//img30.360buyimg.com/focus/s140x140_jfs/t1/134182/23/366/16758/5eccb3caE2b8d0c6d/7ab40f9d9441a2a5.jpg",
                        name: "保健品"
                    },
                    {
                        imgsrc: "//img20.360buyimg.com/focus/s140x140_jfs/t1/129461/33/2827/16392/5ecb3dd2E2d178436/c4cd36d661e91665.jpg",
                        name: "休闲零食"
                    },
                    {
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/113143/20/8135/9835/5ecb81ccE22407538/e9a80b7af28e83a6.jpg",
                        name: "数据线"
                    },
                    {
                        imgsrc: "//img20.360buyimg.com/focus/s140x140_jfs/t1/96008/21/11832/14563/5e3e883fE941b27f7/e073dd6dd02ecd02.jpg",
                        name: "游戏机"
                    },                  
                    {
                        imgsrc: "//img12.360buyimg.com/focus/s140x140_jfs/t1/116006/32/8107/3290/5ecb3fb1Eaf924484/552f5b1d08d42fee.jpg",
                        name: "美妆护肤"
                    },
                    {
                        imgsrc: "//img14.360buyimg.com/focus/s140x140_jfs/t1/131006/3/360/19831/5eccb047E2e95a92e/b425dc4923a20c15.jpg",
                        name: "图书"
                    },
                    {
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/30718/32/2643/9923/5c6d03ecEabd2d664/aaee556800519e1f.png",
                        name: "三只松鼠"
                    },
                    {
                        imgsrc: "//img13.360buyimg.com/focus/s140x140_jfs/t1/23312/39/9884/7280/5c822292E65f3929b/78ba741d321954b0.png",
                        name: "洗衣液"
                    },
                    {
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/11731/9/10730/9518/5c822298Eb50b3275/33f88663e1c0284e.png",
                        name: "保温杯"
                    },
                    {
                        imgsrc: "//img10.360buyimg.com/focus/s140x140_jfs/t1/21353/14/7486/17896/5c6d03c0Eb9c58d49/9210736682f59e39.png",
                        name: "微波炉"
                    },
                    {
                        imgsrc: "//img13.360buyimg.com/focus/s140x140_jfs/t1/25168/27/9848/15397/5c822507E35d2ad16/384983a98758f8f8.png",
                        name: "洗发水"
                    },
                    {
                        imgsrc: "//img20.360buyimg.com/focus/s140x140_jfs/t1/19562/14/9878/32183/5c8225f6E7c332db7/c886e52dc05b9ae4.png",
                        name: "卫生巾"
                    },
                    {
                        imgsrc: "//img30.360buyimg.com/focus/s140x140_jfs/t1/21233/40/7634/13890/5c6d039bE8a65d667/aef9581abcc85725.png",
                        name: "耳机"
                    },
                    {
                        imgsrc: "//img14.360buyimg.com/focus/s140x140_jfs/t1/114862/21/8081/13361/5ecb398fEc7c98869/4b4101d0acbf4ced.jpg",
                        name: "口罩"
                    },
                    {
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/97873/26/11984/16170/5e3e878eE3d6f29d8/820c61d6be7faf12.jpg",
                        name: "投影仪"
                    },
                    {
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/26217/19/7605/22816/5c6d03a3E4f263c9d/d6fc27b51078358c.png",
                        name: "电磁炉"
                    },
                    {
                        imgsrc: "//img14.360buyimg.com/focus/s140x140_jfs/t27400/283/1600620667/15106/a935e7bd/5be6f2e1Nfa8d9d6e.png",
                        name: "路由器"
                    },
                    {
                        imgsrc: "//img10.360buyimg.com/focus/s140x140_jfs/t1/106781/8/11928/23561/5e3e833fE92c281f5/72b834ead18b6462.jpg",
                        name: "充电宝"
                    },
                    {
                        imgsrc: "//img30.360buyimg.com/focus/s140x140_jfs/t1/1446/14/631/8500/5b9237e5E0d1f9e16/b1a627b92323b5ed.png",
                        name: "华为"
                    },
                    {
                        imgsrc: "//img20.360buyimg.com/focus/s140x140_jfs/t1/29265/29/7571/29171/5c6d0389E251fe5f2/987962eb75bfe813.png",
                        name: "电饭煲"
                    },
                    {
                        imgsrc: "//img11.360buyimg.com/focus/s140x140_jfs/t1/26217/19/7605/22816/5c6d03a3E4f263c9d/d6fc27b51078358c.png",
                        name: "电磁炉"
                    }
                   

                ]
            }
        }
    }
</script>

<style>
    .sort-box {
        width: 100%;
        height: auto;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        top: 45px;
    }

    .sort-header {
        width: 100%;
        height: 45px;
        position: fixed;
        z-index: 10;
        border-bottom: 1px solid rgb(229, 229, 229);
    }

    .sort-header span {
        display: inline-block;
        margin: 8px 20px 0px 20px;
        font-size: 20px;
        color: rgb(93, 95, 106);
    }

    .sort-input {
        display: inline-block;
        width: 75%;
        border: none;
        border-radius: 15px;
        height: 30px;
        overflow: hidden;
        background: #f7f7f7;
        font-size: 14px;
        -webkit-box-align: center;
        line-height: 30px;
        /* margin-top: 4px; */
        padding-left: 15px;
    }

    .sort-search {
        width: 7%;
        position: relative;
        top: 13px;
        left:4px;
    }

    .sort-content {
        height: auto;
        min-height: 100%;
    }

    .sortting {
        width: 85px;
        background: #f8f8f8;
        float: left;
        height: auto;
        overflow-y: auto;
        min-height: 100%;
    }

    .sortting-list {
        width: 100px;
       
    }

    .sort-ul {
        transform: translateY(0px);
        display: block;
        margin: 0;
        padding: 0;
        width: 100px;
        list-style-type: none;
        overflow: hidden;
    }

    .sort-ul li {
        display: block;
        /* padding: 8px; */
        width: 85px;
        height: 46px;
        text-decoration: none;
        color: #000;
        font-size: 14px;
        text-align: center;
        line-height: center;
    }

    .sortmodual {
        height: 100%;
        width: 100%;
        background-color: #fff;
        padding: 10px;
    }
</style>